// 周边配套
<template>
  <div id="SupportDetailsList">
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="SupportDetailsList_wrap">
      <div class="SupportDetailsList_wrap_tabs">
        <div>
          <div id="tabNameAll">
            <div class="tabNameAll_tag">
              <ul>
                <li
                  v-for="(item, index) in tagList"
                  :key="index"
                  :class="item.aliases == labCode ? 'lpxqIndexWendaActive' : ''"
                >
                  <a
                    class="labs-a"
                    :href="prefixUrl+`/lpxqdp/${estateId}.html?aliases=${item.aliases}`"
                  >{{item.lab}}</a>
                </li>
              </ul>
            </div>
            <div class="house-problem_QA_son">
              <ul class="house-problem_DP_son_content" v-if="problemList.length!=0">
                <li v-for="(item, index) in problemList" :key="index">
                  <div>
                    <div>
                      <img :src="item.userImg" alt />
                      {{item.userName}}
                    </div>
                    <p>{{ item.content }}</p>
                  </div>
                  <div class="house-problem_DP_son_urls" v-if="item.urlsImg &&item.mediaType ==1">
                    <span v-for="(itm,ind) in item.urlsImg" :key="ind">
                      <img :src="itm" alt @click="openPreviewImg(item.urlsImg, ind)" />
                    </span>
                  </div>
                  <div>
                    <p>{{item.datetime}}</p>
                  </div>
                </li>
              </ul>
              <ul class="house-problem_DP_son_content" v-else>
                <li>
                  <h4>暂无数据</h4>
                </li>
              </ul>
              <div class="house-problem_QA_son_button">
                <el-button type="primary" plain>
                  <a :href="prefixUrl+`/lpxqwydp/${estateId}.html`">我要点评</a>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 预览图片 -->
    <div class="AbbrevImgType">
      <el-dialog
        :visible.sync="AbbreviationImgCode"
        :show-close="false"
        width="800px"
        @close="swiperList=[];swiperIndex=0;"
        :destroy-on-close="false"
      >
        <div id="swiper_img" class="AbbrevImgType_img" style="height: auto;">
          <el-carousel
            :autoplay="false"
            :loop="false"
            @change="bannerChange"
            height="500px"
            :initial-index="swiperIndex"
          >
            <el-carousel-item v-for="(item, index) in swiperList" :key="index">
              <img :src="item" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="AbbrevImgType_posi">
          <h5 style="margin: 10px 0">
            <i class="icon el-icon-warning-outline"></i>
            免责声明：本网站所有楼盘图片均由开发商、经纪人、用户自行提供或上传分享，本站旨在为广大用户免费传递更多信息，本站所有内容仅供参考，请自行核对实际情况，本网站将不对任何内容负法律责任，如对内容有任何疑议，请联系我们,我们将尽快处理。
          </h5>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
var head = {
  title: '成都✖✖✖✖✖✖✖✖✖✖', // 网页包头
  content: '成都✖✖✖✖✖✖✖✖✖✖', // 网页描述
  keywords: '成都,买房,管家,楼盘,买房网,✖✖✖✖✖✖✖✖✖✖', // 网页关键词
}
import axios from 'axios'
import u from '~/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [
        {
          rel: 'stylesheet',
          href: `/css/lpgk.css?v=${new Date().getTime()}`,
        },
      ],
    }
  },
  data() {
    return {
      activeCode: 6,
      userInfo: '',
      HouseRoomListCode: '全部',
      HouseRoomListIndex: 0,
      phone: '',
      textareaValue: '',
      popup: {
        show: false,
        cover:
          'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20210907/8b2e500aa48e4a29abbc68cd53059a7f.png',
        title: '提交成功',
        desc: '您的问题已提交后台审核',
        confirmText: '确认',
      },
      AbbreviationImgCode: false,
    }
  },
  validate(ctx) {
    return /(.*?)\.html/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl //域名
    var currentCity = ctx.currentCity //城市定位
    var cityList = ctx.cityList //
    var crumbListData = [] //栏目信息
    var estateId = ctx.params.id ? ctx.params.id.split('.')[0] : '' //楼盘ID
    var pageNum = 1 //问答（页）
    var pageSize = 10 //问答（条）
    var problemList = [] //问答列表

    var HouseDetail = [] //楼盘详情数据
    var tagList = []
    var labCode = ctx.query.aliases || ''
    var empty = false
    var loading = {
      show: false,
      text: '加载数据',
    }
    // 获取楼盘详情
    var getMetro = await u.http({
      url: '/pc/houseDetail/queryHouseInfoDetailById',
      params: {
        estateId: estateId, //楼盘ID
      },
    })
    var swiperList = [];
    var swiperIndex = 0;
    if (getMetro.code == 200) {
      HouseDetail = getMetro.data.houseInfoDetail
      head.title = `${HouseDetail.name},楼盘户型，周边配套，交通地图，${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
      head.content = `✖✖✖✖✖✖✖✖✖✖为您提供${currentCity.cityName}${HouseDetail.name}问答,${HouseDetail.name}所有问答大全,要看详细,清晰的${HouseDetail.name}问答就上✖✖✖✖✖✖✖✖✖✖`
      head.keywords = `${HouseDetail.name}楼盘问答`

      // ==========楼盘面包屑============
      var regionCode = {
        title: `${HouseDetail.regionName}楼盘`,
        href: prefixUrl + `/lpcx/${HouseDetail.regionAliases}`,
      }
      // 202112071655 sry 合并路径
      var regionA = [HouseDetail.regionAliases]
      var streetA = [HouseDetail.streetAliases]
      var nowCrumbHref = u.emptyArrayIsNull(regionA.concat(streetA))
      if (HouseDetail.streetName && HouseDetail.streetAliases) {
        var streetCode = {
          title: `${HouseDetail.streetName}楼盘`,
          href: prefixUrl + `/lpcx/${nowCrumbHref.join('-')}`,
        }
      } else {
        var streetCode = null
      }

      var houseCode = {
        title: `${HouseDetail.name}`,
        href: prefixUrl + `/lpxq/${estateId}.html`,
      }

      // 修改栏目信息
      crumbListData = [
        {
          title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
          href: prefixUrl,
        },
      ]

      if (streetCode) {
        crumbListData.push(regionCode, streetCode, houseCode)
      } else {
        crumbListData.push(regionCode, houseCode)
      }
      // ==========楼盘面包屑============
    } else {
      // 202111091818 sry
      return ctx.redirect('/error.html')
    }

    // 202112281642 ary 楼盘点评
    var problem = await u.http({
      url: '/app/houseInfoDP/queryHouseDPList',
      params: {
        estateId: estateId, //楼盘ID
        pageNum,
        pageSize,
        labs: String(labCode),
      },
    })
    if (problem.code == 200) {
      problemList = problem.data.list
      
      if (problemList.length == 0) {
        empty = true
        loading.show = false
      }
      problemList.forEach((item) => {
        item.moreText = '全文'
        // if (item.content.length >= 45) {
        //   item.moreShow = true
        // } else {
        //   item.moreShow = false
        // }
        // var date = new Date(item.createdTime)
        // var YY = date.getFullYear() + '-'
        // var MM =
        //   (date.getMonth() + 1 < 10
        //     ? '0' + (date.getMonth() + 1)
        //     : date.getMonth() + 1) + '-'
        // var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        // var hh =
        //   (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
        // var mm =
        //   (date.getMinutes() < 10
        //     ? '0' + date.getMinutes()
        //     : date.getMinutes()) + ':'
        // var ss =
        //   date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        // return (item.datetime = YY + MM + DD + ' ' + hh + mm + ss)

        // 202112311456 sry
        item.moreShow = (item.content.length >= 45) ? true : false;
        item.urlsImg = item.urls ? item.urls.split(',') : [];
        item.datetime = u.formatTime(item.createdTime, 'Y-m-d H:i:s')
      })
      var total = problem.data.total
    } else {
      loading.show = false
      empty = true
    }

    var tag = await u.http({
      url: '/app/houseInfoDP/countHouseInfoDPNum',
      params: {
        estateId: estateId, //楼盘ID
      },
    })
    if (tag.code == 200) {
      tagList = tag.data
    }

    return {
      prefixUrl,
      currentCity,
      cityList,
      crumbListData,
      estateId,
      HouseDetail,
      problemList,
      pageSize,
      pageNum,
      tagList,
      labCode,
      total,
      swiperList,
      swiperIndex,
    }
  },
  methods: {
    // 切换预览图片
    bannerChange(index) {
      this.swiperIndex = index;
    },
    // 打开预览图片
    openPreviewImg(imgArr, index) {
      this.AbbreviationImgCode = true;
      this.swiperList = imgArr;
      this.swiperIndex = index;
    },
    // 获取列表
    getListData() {
      this.loading.text = '正在加载中...'
      this.loading.show = true
      u.http({
        client: true,
        url: '/app/houseInfoDP/queryHouseDPList',
        params: {
          estateId: this.estateId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          labs: String(this.labCode),
        },
      }).then((res) => {
        if (res.code == 200) {
          this.problemList = [...this.problemList, ...res.data.list]
          this.loading.text = '加载数据'
          return
        }
        this.loading.show = false
      })
    },
    // 懒加载
    load() {
      if (this.pageNum >= this.total) {
        this.loading.text = '我是有底线的'
        return
      }
      this.pageNum++
      this.getListData()
    },
  },
}
</script>